<template>
	<div>
		<div class="box">
			<div class="title">
				<span class="tag"></span>
				更换出租方
			</div>
			<AForm
				ref="form1"
				v-model="formData.previousData"
				:config="formList1"
				:layout="{ column: true }"
				:state="state"></AForm>
			<AForm
				ref="form2"
				v-model="formData.subsequentData"
				:config="formList2"
				:layout="{ column: true }"
				:state="state"></AForm>
		</div>
	</div>
</template>

<script>
	import AForm from '@/components/A/A-form/form/index.vue';
	export default {
		name: '',
		components: { AForm },
		props: {
			value: {
				type: Object,
				default: () => {
					return {};
				},
			},
			deptList: {
				type: Object,
			},
			state: {
				required: false,
			},
		},
		data() {
			return {};
		},
		computed: {
			formData: {
				get() {
					return this.useVModel.call(this);
				},
				set(val) {
					this.$emit('input', val);
				},
			},
			formList1() {
				return [
					{
						label: '原出租方',
						type: 'select',
						dict: {
							list: this.deptList?.company ?? [],
							label: 'deptName',
							value: 'deptId',
						},
						state: 'readonly',
						prop: 'lessorId',
						on: {
							change: ({ row, val }) => {
								let item = this.deptList?.company?.find(
									e => e.deptId === row.lessorId,
								);
								if (item) {
									this.formData.lessorName = item.deptName;
								} else {
									this.formData.lessorName = '';
								}
							},
						},
					},
				];
			},
			formList2() {
				return [
					{
						label: '更换出租方',
						type: 'select',
						dict: {
							list: this.F_company ?? [],
							label: 'deptName',
							value: 'deptId',
						},
						prop: 'lessorId',
						on: {
							change: ({ row, val, item }) => {
								this.formData.newLessorName =
									item.value?.deptName;
							},
						},
						rules: true,
					},
				];
			},
			F_company() {
				return this.deptList?.company?.filter(item => {
					return item.deptId !== this.formData.previousData.lessorId;
				});
			},
		},

		created() {
			this.initLessorId();
		},
		mounted() {},

		methods: {
			initLessorId() {
				if (
					this.formData.previousData.lessorId ===
					this.formData.subsequentData.lessorId
				) {
					this.formData.subsequentData.lessorId = undefined;
				}
			},
			setDefaultData() {
				for (const key in this.formList2) {
					if (Object.hasOwnProperty.call(this.formList2, key)) {
						this.formData.subsequentData[key] =
							this.formData.previousData[key];
					}
				}
			},
		},
		beforeDestroy() {
			this.setDefaultData();
		},
	};
</script>

<style lang="scss" scoped>
	.box {
		border-radius: 8px;
		background-color: #fff;
		.title {
			font-size: 14px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 22px;
			padding-top: 15px;
			padding-bottom: 15px;
			// border-bottom: 1px solid #e9e9e9;
			display: flex;
			align-items: center;
			.tag {
				width: 8px;
				height: 8px;
				background-color: #1890ff;
				border-radius: 100%;
				margin-right: 10px;
			}
			.price {
				font-size: 14px;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #1890ff;
				line-height: 20px;
				margin-left: 20px;
			}
		}
	}
</style>
